<template>
  <div class="row wrap">
    <playlist-item
      class="col-4 q-ma-sm"
      :value="playlist"
      v-for="playlist in playlists"
      :key="playlist.id"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import PlaylistItem from 'components/playlist/PlaylistItem.vue';
import Playlist from 'src/models/Playlist';
export default defineComponent({
  components: {
    PlaylistItem,
  },
  setup() {
    const playlists = ref([
      new Playlist('0', 'Studies', 'No Description'),
      new Playlist(
        '1',
        'All my tutorials',
        'Every single one of my tutorials in one place. I will continue to add it when I create more!'
      ),
    ]);
    return {
      playlists,
    };
  },
});
</script>